<!-- templates/weather.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>城市天气查询</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
            background-color: #f0f8ff;
            text-align: center;
        }
        input, button {
            padding: 10px;
            font-size: 16px;
            margin: 10px;
        }
        .weather-info {
            margin-top: 20px;
            background: white;
            padding: 20px;
            border-radius: 8px;
            display: inline-block;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>

    <h1>🌍 查询城市天气</h1>

    <input type="text" id="cityInput" placeholder="请输入城市名称">
    <button onclick="fetchWeather()">查询天气</button>

    <div class="weather-info" id="weatherInfo" style="display: none;">
        <h2 id="cityName"></h2>
        <p>温度: <span id="temperature"></span> °C</p>
        <p>体感温度: <span id="feelsLike"></span> °C</p>
        <p>湿度: <span id="humidity"></span> %</p>
        <p>风速: <span id="windSpeed"></span> m/s</p>
        <p>天气: <span id="description"></span></p>
    </div>

    <script>
        function fetchWeather() {
            const city = document.getElementById("cityInput").value.trim();
            if (!city) {
                alert("请输入城市名称");
                return;
            }

            fetch(`/get_weather?city=${encodeURIComponent(city)}`)
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        alert("查询失败：" + data.error);
                        return;
                    }

                    document.getElementById("cityName").innerText = data.city;
                    document.getElementById("temperature").innerText = data.temp;
                    document.getElementById("feelsLike").innerText = data.feels_like;
                    document.getElementById("humidity").innerText = data.humidity;
                    document.getElementById("windSpeed").innerText = data.wind_speed;
                    document.getElementById("description").innerText = data.description;

                    document.getElementById("weatherInfo").style.display = "block";
                })
                .catch(err => {
                    console.error(err);
                    alert("发生错误，请查看控制台");
                });
        }
    </script>

</body>
</html>